<template>
  <div class="app-container">
    <div class="w-table">
      <!-- 筛选 -->
      <table-filter @save="filterChange" />

      <!-- btn -->
      <div class="w-table-btn">
        <el-button icon="plus" plain type="primary" @click="add">
          新增班级
        </el-button>
      </div>

      <!-- 表格 -->
      <table-body
        ref="table"
        v-model="selection"
        v-loading="loading"
        class="w-table-b"
        :list="list"
        @del="del"
        @detail="detail"
        @edit="edit"
        @sort-change="sortChange"
        @student="onStudentChange"
      />

      <!-- 翻页 -->
      <div class="w-table-f">
        <el-pagination
          v-model:current-page="queryData.pageNum"
          v-model:page-size="queryData.pageSize"
          background
          layout="total,->,prev, pager, next ,sizes ,jumper"
          :pager-count="5"
          :total="pageTotal"
          @current-change="request"
          @size-change="request"
        />
      </div>
    </div>

    <!-- 弹出窗 -->
    <table-edit ref="editDialog" @save="request" />

    <table-student ref="editStudentRef" @save="request" />
  </div>
</template>

<script setup>
  import $api from './api.js'
  import TableFilter from './filter.vue'
  import TableBody from './body.vue'
  import TableEdit from './edit.vue'
  import TableStudent from './student.vue'

  const { proxy } = getCurrentInstance()

  // 组件
  const editDialog = ref(null)
  const editStudentRef = ref(null)

  // data
  const selection = ref([])
  const list = ref([])
  const queryData = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const loading = ref(false)
  const pageTotal = ref(0)

  // 方法
  function load() {
    request()
  }

  function request(v) {
    const sendData = {
      ...queryData.value,
      ...v,
    }
    loading.value = true
    $api
      .list(sendData)
      .then((res) => {
        list.value = []
        list.value = res.rows
        pageTotal.value = res.total
      })
      .finally(() => {
        loading.value = false
      })
  }

  function filterChange(d) {
    queryData.value = {
      ...queryData.value,
      ...d,
    }
    queryData.value.pageNum = 1
    request()
  }

  function sortChange(d) {
    queryData.value = {
      ...queryData.value,
      ...d,
    }
    request()
  }

  function add() {
    // 调用子组件的方法
    editDialog.value.load('add')
  }

  function detail(d) {
    // 调用子组件的方法
    editDialog.value.load('detail', d)
  }

  function edit(d) {
    // 调用子组件的方法
    editDialog.value.load('edit', d)
  }

  function del(d) {
    proxy
      .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        _del(d.id)
      })
  }

  function _del(id) {
    const sendData = {
      id,
    }
    $api.delete(sendData).then((res) => {
      proxy.$message.success('删除成功!')
      load()
    })
  }

  function onStudentChange(row) {
    editStudentRef.value.load(row)
  }

  // 生命周期
  onMounted(() => {
    load()
  })
</script>

<style lang="scss" scoped></style>
